import {listData, userAgentObj} from './data';
import {getList, getUserAgent} from './domInnerHTML';
import {isObj} from './util';
import {hideModal} from './domFn';
import {author} from './config';
import './modal'
import './slideBar'

const doc = document;
const list = doc.getElementById('list');
const agentDom = doc.getElementsByClassName('item-list');
const layer = doc.getElementById('layer');
const layerClose = layer.getElementsByClassName('icon-close')[0];
const avatar = doc.getElementById('avatar');
const signBox = doc.getElementsByClassName('sign-box')[0];
const filterWrapper = doc.getElementsByClassName('filter-wrapper')[0];
export const fn = {
  init: () => {
    list.innerHTML = `${getList(listData).join('')}`
  },
  modalInit: (modalDom) => {
    modalDom.style.top = '50%';
    modalDom.style.left = '50%';
    modalDom.style.transform = 'translate3D(-50%,-50%,0)';
  },
  render: (index, arr) => {
    return {
      del: () => {
        if (isObj(index)) {
          //删除元素
          const {parentIndex, delTargetIndex} = index;
          userAgentObj[parentIndex].splice(delTargetIndex, 1)
          const UGArr = userAgentObj[parentIndex];
          agentDom[parentIndex].innerHTML = getUserAgent(UGArr);
        }
      },
      add: () => {
        //增加元素
        if (!arr.length) return;
        userAgentObj[index].push(...arr)
        const UGArr = userAgentObj[index];
        agentDom[index].innerHTML = getUserAgent(UGArr);
      }
    };
  }
}

fn.init();

layerClose.onclick = () => {
  hideModal(layer)
}


avatar.onclick = () => {
  signBox.classList.toggle('hide')
}
filterWrapper.onclick = function (e) {
  const itemDom = this.getElementsByClassName('item');
  for (let i = 0; i < itemDom.length; i++) {
    itemDom[i].classList.remove('active')
  }
  e.target.classList.add('active')
}



